<template>
    <detail-page>
        <div class="title">选择影城</div>
        <div class="cinema-list">
            <div class="cinema-btn" v-for="(cinema,index) in cinemas" :key="index" @click="cinemaSelect(cinema)">
                {{cinema.name}}
            </div>
        </div>
    </detail-page>
</template>

<script>
import DetailPage from '@/components/DetailPage'
export default {
  components: {DetailPage},
  data () {
    return {
      cinemas: []
    }
  },
  methods: {
    cinemaSelect (cinema) {
      this.$router.push({path: '/select_time', query: {cinemaId: cinema.id, cinemaName: cinema.name, channel: this.$route.query.channel}})
    }
  },
  async created () {
    this.cinemas = await this.$request.post('/api_ygc/cinemas', {channel: this.$route.query.channel})
  }
}
</script>

<style scoped lang="scss">
.title{
    color:#5a5858;
    font-size: 34px;
    text-align: center;
    position: absolute;
    top:330px;
    width: 100%;
    letter-spacing: 8px;
}
.cinema-list{
    position: absolute;
    top:400px;
    left:0px;
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    max-height: 50vh;
    -webkit-overflow-scrolling: touch;
    .cinema-btn{
        width: 540px;
        height: 122px;
        background-image: url('~@/assets/8.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-size: 30px;
        color:#fff;
        line-height: 120px;
        text-align: center;
        &+.cinema-btn{
            margin-top:-14px;
        }
    }
}
</style>
